<template>
	<view>
		<view
			style="margin-top: 60rpx;width: 100%;height: 321rpx;background-color: #688517;border-radius: 0 0 40rpx 40rpx;display: flex;flex-wrap: nowrap;padding: 0 30rpx 36rpx;box-sizing: border-box;align-items: center;">
		<!-- 	<image src="/static/waimai/返回@2x.png" @click="backTo()"
				style="width: 18rpx;height: 32rpx;margin-right:20rpx ;" mode="aspectFit"></image> -->
				<uni-icons type="arrowleft" size="20" color="#fff" @click="backTo"></uni-icons>
			<view style="position: relative;margin-right: 29rpx;">
				<image src="/static/waimai/搜索@2x.png"
					style="width: 24rpx;height: 24rpx;position: absolute;top:24rpx;left: 20rpx;" mode="aspectFit">
				</image>
				<input type="text" value="" placeholder="请输入商品名称"
					style="box-sizing: border-box; width: 500rpx;height: 72rpx;background-color: #fff;border-radius: 15rpx;padding-left: 64rpx;" />
			</view>
			<view style="display: flex;flex-direction: column;align-items: center;margin-right: 20rpx;">
				<image src="/static/waimai/收藏@2x.png" style="width: 35rpx;height: 34rpx;" mode="aspectFit"></image>
				<text style="font-size: 16rpx;color: #FFF;">收藏</text>
			</view>
			<view style="display: flex;flex-direction: column;align-items: center;">
				<image src="/static/waimai/分%20享%20(1)@2x.png" style="width: 35rpx;height: 34rpx;" mode="aspectFit">
				</image>
				<text style="font-size: 16rpx;color: #FFF;">分享</text>
			</view>
		</view>
		<view
			style="margin:-100rpx 30rpx 25rpx; display: flex;flex-wrap: nowrap;box-sizing: border-box; width: 690rpx;height: 252rpx;padding: 20rpx 0 18rpx 20rpx;box-shadow: 0 0 4rpx 1rpx #B4B4B4; border-radius: 14rpx;background-color: #fff;">
			<image :src="infoSrc" style="background-color: #666155; width: 206rpx;height: 206rpx;border-radius: 14rpx;"
				mode="aspectFill"></image>
			<view style="margin-left: 18rpx;">
				<text class="title">{{info.store.title}}</text>
				<view
					style="display: flex;align-items: center;margin-top: 10rpx; flex-wrap: nowrap;font-size: 22rpx;color: #FF6F00;">
					<text style="margin-right: 5rpx;">{{info.store.score}}</text>
					<uni-rate v-model="info.store.score" :value="5" :size="12" color="#ADC3D0" activeColor="#FF6F00">
					</uni-rate>
				</view>
				<view style="font-size: 22rpx;color: #666666;margin-top: -15rpx;">
					<text>起送¥{{info.store.send_price}}</text>
					<text style="margin: 0 4rpx 21rpx 10rpx;">月售{{info.store.sailed}}</text>
					<text>可自取</text>
					<image src="/static/waimai/组%207@2x.png" style="width: 50rpx;height: 50rpx;margin: 0 10rpx 0 90rpx;"
						mode="aspectFit"></image>
				</view>
				<view style="position: relative;">
					<view style="font-size: 22rpx;display: flex;flex-direction: column;margin-top: 25rpx;">
						<text style="color: #1B1B1B;">{{info.store.address}}</text>
						<text
							style="color: #999999;margin-top: 5rpx;">距您{{distance/1000}}km，需要{{info.store.delivery_time}}分钟</text>
					</view>
					<image src="/static/waimai/返回@2x(1).png"
						style="width: 11rpx;height: 21rpx;position: absolute;top:40%;right: 4%;" mode="aspectFit">
					</image>
				</view>
			</view>
		</view>
		
		<view class="full-reduction">
			<view class="full-reduction-tag">
				<text>22减10</text>
				<text style="margin: 0 2rpx;">|</text>
				<text>48减20</text>
			</view>
			<text class="full-reduction-tag">
				开会员减6元
			</text>
			<view class="full-reduction-tag">
				<text>22减10</text>
				<text style="margin: 0 4rpx;">|</text>
				<text>48减20</text>
			</view>
			<view @click="openCouponsPopup">
				<text style="color: #999999;font-size: 22rpx;margin:0 5rpx 0 10rpx;">5个优惠</text>
				<image src="/static/waimai/返回@2x(1).png" style="width: 11rpx;height: 21rpx;" mode="aspectFit"></image>
			</view>
		</view>
		
		<uni-popup ref="coupons" type="bottom">
			<view
				style="height: 749rpx;border-radius: 30rpx 30rpx 0 0;background-color: #fff;padding-top: 45rpx;box-sizing: border-box;">
				<view style="display: flex;flex-direction: column;">
					<image src="/static/login/qx.png" style="width: 24rpx;height: 19rpx;margin: 10rpx 30rpx 0 680rpx;"
						@click="closeCouponsPopup" mode="aspectFit"></image>
					<text style="font-size: 34rpx;color: #1B1B1B;margin: 0 290rpx">优惠券领取</text>
				</view>
				<!-- 优惠券 -->
				<block v-if="isShow">
					<scroll-view scroll-y="true" >
							<block v-for="(tic,index) in couponsList" :key="tic">
								<view class="coupons">
									<view class="coupon-value" >
										<text>¥</text>
										<text>{{tic.discount}}</text>
									</view>
									<view class="coupon-limit">
										<text style="font-size: 32rpx;color: #1B1B1B;">{{tic.title}}</text>
										<text style="position: absolute;bottom: 30rpx;">{{tic.use_days_limit}}天后到期</text>
									</view>
									<button type="default" class="coupon-btn" @click="getCoupon(tic)">
									{{ tic.isget == 0 ?'领取':'去使用'}}
									</button>
								</view>
							</block>
					
					</scroll-view>
					<view style="background-color: #fff;height: 80rpx;"></view>
					<view class="popupBottom">
						<text>------到底啦------</text>
					</view>
				</block>
				<block v-else>
					<view style="background-color: #fff;height: 120rpx;"></view>
					<view class="popupBottom">
						<text>空空如也</text>
					</view>
				</block>
			</view>	
		</uni-popup>
		
		<view style="width: 750rpx;height: 20rpx;background-color: #F7F7F7;"></view>
		<!-- 商品详情 -->
		<view>
			<!-- 头部选项卡 -->
			<view class="head-nav">
				<view style="margin: 0 35rpx;" v-for="(tab, index) in navList" :key="index"
					:class="{ activite: navIndex === index }" @click="checkIndex(index)">
					{{ tab }}
					<view class="select"></view>
				</view>
			</view>
			<!-- 内容区 -->
			<!-- 商品 -->
			<view style="margin: 0 30rpx;" v-if="navIndex === 0">
				<view style="display: flex;">
					<!-- 商品分类选择栏 -->
					<view class="list">
						<view v-for="(v, index) in sp" class="sp" :key="index" :class="{ active: spIndex === index }"
							@click="listIndex(index)" style="position: relative;">
							{{ v.title }}
							<view class="num"
								style="width: 26rpx; height: 26rpx; border-radius: 50%; position:absolute;background: red; color: #FFFFFF; font-size: 22rpx; line-height: 26rpx; text-align: center; top: 4rpx; right: 0rpx; z-index: 1;"
								v-if="v.total*1">
								{{v.total}}
							</view>
						</view>

					</view>
					<!-- 商品列表区域 -->
					<scroll-view scroll-y="true">
						<view style="display: flex;margin-bottom: 30rpx;background-color: #F7F7F7;"
							v-for="(item, index) in dishList" :key='index'>
							<view
								style="width: 168rpx;height: 168rpx;background-color: #F7F7F7;display: flex;align-items: center;justify-content: center;border-radius: 10rpx;">
								<image src="" style="background-color: #647617; width: 136rpx;height: 105rpx;"
									mode="aspectFit"></image>
							</view>
							<view style="margin-left: 20rpx;margin-top: -20rpx;">
								<view
									style="display: flex;line-height: 40rpx; flex-direction: column;font-size: 24rpx;color: #999999;">
									<text
										style="font-size: 30rpx;color: #1B1B1B;margin-top: 14rpx;padding: 5rpx;">{{item.title}}</text>
									<text
										style="width: 354rpx; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
										{{item.content}}
									</text>
									<view>
										<text style="margin-right: 10rpx;">月售 {{item.sailed}}</text>
										<text>好评率{{item.comment_good_percent}}</text>
									</view>
								</view>
								<view style="display: flex;align-items: center;	margin-top: 15rpx;position: relative;">
									<view>
										<text style="font-size: 24rpx;color: #F61B00;">¥</text>
										<text style="font-size: 36rpx;color: #F61B00;">{{item.price}}</text>
										<text
											style="font-size: 24rpx;color: #B4B4B4;text-decoration: line-through;">¥{{item.old_price}}</text>
									</view>
									<view @click="open(index)"
										style="position: absolute;right: 10rpx; bottom: 10rpx; display: flex;align-items: center;justify-content: center; width: 120rpx;height: 46rpx;background-color: #688517;border-radius: 23rpx;color: #fff;font-size: 24rpx;">
										规格
										<view v-if="sp[spIndex].total*1"
											style="width: 36rpx; height: 36rpx; background: red; color: #FFFFFF; font-size: 20rpx; line-height: 36rpx; text-align: center; position: absolute; border-radius: 50%; top: -10rpx; right: 0rpx;">
											{{sp[spIndex].total*1}}
										</view>
									</view>
								</view>

								<uni-popup ref="popup" type="bottom">
									<view
										style="min-height: 300rpx;border-radius: 30rpx 30rpx 0 0;background-color: #fff;">
										<image src="/static/login/qx.png"
											style="width: 24rpx;height: 30rpx;margin: 24rpx 30rpx 0 690rpx;"
											mode="aspectFit" @click="cancel()"></image>
										<view style="display: flex;">
											<image src="@/static/icon/icon1.png"
												style="width: 100rpx;height: 100rpx;border-radius: 15rpx;margin: 40rpx 30rpx 42rpx;"
												mode="aspectFill"></image>
											<view
												style="margin-top: 50rpx ; height: 100rpx; display: flex; flex-direction: column; align-content: center;">
												<text style="font-size: 36rpx;">{{popupData.title}}</text>
												<view style="display: flex;align-items: center;">
													<text style="font-size: 24rpx;color: #F61B00;">¥</text>
													<text
														style="font-size: 36rpx;color: #F61B00;">{{norms[normsIndex].box_price}}
													</text>

												</view>
												<!-- <text style="font-size: 24rpx;">已选：{{ checkedText}}  {{checkedText?"x"+num:''}}</text> -->
											</view>
										</view>
										<view style="margin-left: 30rpx;">
											<view style="font-size: 26rpx;color: #979797;">
												规格
											</view>
											<view style="display: flex;">
												<view class="spec" v-for="(item, index) in norms" :key="index"
													:class="item.checked?'active':''" @click="clickBtn(index)">
													{{item.name}}
												</view>
											</view>
										</view>
										<view
											style="display: flex;justify-content: space-between;margin: 0 30rpx; padding: 20rpx 0;">
											<text style="font-size: 26rpx;color: #979797;">购买数量</text>
											<view style="display: flex;">
												<image src="/static/shequ/jian2.png" :disabled="subState" @click="sub"
													style="width: 45rpx;height: 44rpx;" mode="aspectFit"
													v-if="norms[normsIndex].num*1"></image>
												<text style="width: 40rpx;text-align: center;"
													v-if="norms[normsIndex].num*1">{{norms[normsIndex].num*1}}</text>
												<image src="/static/shequ/add2.png" class="addState" @click="add"
													style="width: 45rpx;height: 44rpx;" mode="aspectFit"></image>
											</view>
										</view>
										<!-- <button type="default"
											style="height: 110rpx;background-color: #688517;font-size: 32rpx;color: #fff;display: flex;justify-content: center;align-items: center;"
											@click="determine()">确定</button> -->
									</view>
								</uni-popup>

								
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view style="margin: 0 30rpx;" v-if="navIndex === 1">
				<!-- 头部选项卡 -->
				<view class="pj">
					<view class="evaluation" v-for="(item, index) in pjList" :class="{ selected: pjIndex === index }"
						@click="checkPj(index)" :key="index">{{ item }}</view>
				</view>
				<!-- 内容切换 -->
				<scroll-view scroll-y="true">
					<view
						style="margin: 0 30rpx;border-bottom: 2rpx solid #F8F8F8;padding-bottom: 30rpx;padding-top: 30rpx;"
						v-if="pjIndex === 0">
						<view style="display: flex;align-items: center; justify-content: space-between;">
							<view style="display: flex;align-items: center;">
								<image src="/static/index/3.png" style="width: 58rpx;height: 58rpx;border-radius: 50%;"
									mode="aspectFit"></image>
								<view style="margin-left: 15rpx;">
									<text>zhahdjd</text>
									<uni-rate v-model="value" :max="5" :readonly="true" :value="5" :size="12"
										color="#ADC3D0" activeColor="#FF6F00"></uni-rate>
								</view>
							</view>
							<text>2019.10.10</text>
						</view>
						<text
							style="line-height: 40rpx; font-size: 22rpx;color: #666666;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin-top: 30rpx;">
							第二次购买了，爽滑不腻，而且还律新鲜，我家小宝贝也喜欢吃，不拦着一次可以吃一大盘。快递也很给力，可能知道我馋这个已经很久了吧
						</text>
						<view style="margin: 20rpx 0;">
							<image src="/static/index/2.png"
								style="width: 167rpx;height: 166rpx;border-radius: 10rpx;margin-right: 8rpx;"
								mode="aspectFill"></image>
							<image src="/static/index/2.png" style="width: 167rpx;height: 166rpx;border-radius: 10rpx;"
								mode="aspectFill"></image>
						</view>
						<view
							style="width: 690rpx;margin: 20rpx 0rpx 4rpx; height: 59rpx;background-color: #F7F7F7;font-size: 22rpx;display: flex;align-items: center;">
							<text style="padding-left: 20rpx;">商家回复：</text>
							<text style="color: #666666;margin-right: 180rpx;">很感谢很感谢很感谢很感谢</text>
							<image src="/static/waimai/消息@2x.png" style="width: 32rpx;height: 32rpx;" mode="aspectFit">
							</image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view style="margin: 0 30rpx;" v-if="navIndex === 2">
				<view style="height: 20rpx;background-color: #f7f7f7;margin: 0 -30rpx;"></view>
				<view
					style="display: flex;flex-direction: column;margin: 30rpx 0;line-height: 45rpx;font-size: 26rpx;color: #666666;">
					<text style="font-size: 30rpx;color: #1B1B1B;margin-bottom: 8rpx;">商家名称</text>
					<text>地址:四川省成都市武侯四川省区205号</text>
					<text>电话：15768979755</text>
					<view style="display: flex;justify-content: space-around;margin: 30rpx 0 40rpx;">
						<image src="/static/meishi/1.png" style="width: 206rpx;height: 150rpx;border-radius: 10rpx;"
							mode="aspectFill"></image>
						<image src="/static/meishi/1.png" style="width: 206rpx;height: 150rpx;border-radius: 10rpx;"
							mode="aspectFill"></image>
						<image src="/static/meishi/1.png" style="width: 206rpx;height: 150rpx;border-radius: 10rpx;"
							mode="aspectFill"></image>
					</view>
					<text style="font-size: 30rpx;color: #1B1B1B;margin-bottom: 8rpx;">商家信息</text>
					<text>商家品类：食品类</text>
					<text>营业时间：09:00——21:00</text>
					<text style="font-size: 30rpx;color: #1B1B1B;margin-bottom: 8rpx;margin-top: 30rpx;">服务承诺</text>
					<text>商家品类：食品类</text>
				</view>
			</view>
		</view>

		<view style="position: fixed; bottom:0;right:0;background-color: #FFFFFF;">
			<view style="height: 110rpx;display: flex;justify-content: space-between;">
				<view style="display: flex;width: 510rpx;justify-content: space-between;align-items: center;">
					<view style="padding-left: 30rpx; display: flex;align-items: center;">
						<image src="/static/shequ/图层%2044@2x.png" style="width: 40rpx;height: 39rpx;" mode="aspectFit">
						</image>
						<text style="font-size: 24rpx;color: #1B1B1B;margin-left: 10rpx;">已选{{carTotal}}</text>
					</view>
					<text
						style="font-size: 20rpx;font-weight: bold;color: #F61B00;padding-right: 30rpx;">¥{{price}}</text>
				</view>
				<button type="default" @click="determine()"
					style="width: 240rpx;height: 110rpx; background-color: #688517;color: #fff;font-size: 32rpx;display: flex;align-items: center;justify-content: center;border-radius: 0;">
					去支付
				</button>
			</view>
		</view>
		<view style="display: block; width: 100%;height: 150rpx;"></view>
	</view>
</template>

<script>
	import {Storage} from '@/static/libs/utils.js'
	import {
		returnFloat,
		getDate,
		shortTime
	} from '@/utils/index.js'
	import qs from 'qs'
	export default {
		data() {
			return {
				isShow:true,
				num: 1,
				value: 3,
				navIndex: 0,
				navList: ['商品', '评价', '商家'],
				spIndex: 0, //侧边栏索引
				sp: [], //侧边栏
				pjList: ['全部(634)', '晒图(634)', '好评(634)', '差评(322)'],
				pjIndex: 0,
				changeIndex: 0,
				subState: 'true',
				checkedText: '',
				storeInfo: {},
				token: '',
				lat: '',
				lng: '',
				dishList: [],
				popupData: [], //详细商品数据
				sid: '', //店铺id
				info: '', //店铺信息
				distance: '', //店铺距离
				carTotal: 0, //购物车总数量
				carGoodsInfo: [], //购物车商品信息
				normsIndex: 0, //规格索引
				norms: [], //规格
				couponsList:''
			};
		},
		
		mounted() {
			this.getData()
		},
		onLoad(e) {
			
			console.log('进来的参数',e);
			
			this.sid = e.id; //获取店铺id
			this.distance = e.distance; //获取店铺距离
			this.token = Storage.get('token');
			this.lat = Storage.get('latitude');
			this.lng = Storage.get('longitude');
		},
		methods: {
			// 开启优惠券弹窗
			openCouponsPopup(){
				this.$request.get(`https://sxk.scztf.com/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=store&op=goods&ta=index&from=wxapp&state=${this.token}&cid=0&sid=3&code=undefined&order_id=undefined&__lat=undefined&__lng=undefined&forceLocation=1&configmall=1&scene=1001&lat=${this.lat}&lng=${this.lng}`
				).then(res=>{
					 console.log(res.data.message.message.coupon.coupons);
					this.couponsList= res.data.message.message.coupon.coupons||[];
				})
				if(this.couponsList.length == 0){
					this.isShow = false
				}else{
					this.isShow = true
				}
				// console.log(this.$refs);
				this.$refs.coupons.open()
			},
			// 关闭优惠券弹窗
			closeCouponsPopup(){
				this.$refs.coupons.close()
			},
			// 优惠券领取
			getCoupon(item){
				this.$request.get(
				`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=channel&op=coupon&ta=get&from=wxapp&
				state=${this.token}&sid=${this.sid}&scene=1001&lat=${this.lat}&lng=${this.lng}&__lat=${this.lat}&__lng=${this.lng}`)
				.then(res =>{
					console.log(res);
				})
				uni.showToast({
					title:"领取成功" 
				})
				this.$refs.coupons.close()
			},
			sub() {
				var that = this;
				this.$request.post(
					`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=store&op=goods&ta=cart&from=wxapp
					&state=${this.token}&sid=${this.norms[this.normsIndex].sid}&goods_id=${this.norms[this.normsIndex].goods_id}&num=1&sign=-&is_buysvip=0
					&scene=1001&lat=${this.lat}&lng=${this.lng}&__lat=${this.lat}&__lng=${this.lng}&option_id=${this.norms[this.normsIndex].id}`
				).then(res => {
					var carts = res.data.message.message.cart.data;
					var arr = [];
					carts.map(v => {
						Object.keys(v).forEach(kk => {
							arr.push(v[kk]);
						})
					});
					that.carGoodsInfo = arr;
					that.norms[that.normsIndex].num -= 1;
					that.sp[that.spIndex].total -= 1;
					that.carTotal -= 1;
				});
			},
			add() {
				var that = this;
				this.$request.post(
					`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=store&op=goods&ta=cart&from=wxapp&state=${this.token}&sid=${this.norms[this.normsIndex].sid}&goods_id=${this.norms[this.normsIndex].goods_id}&num=1&sign=%2B&is_buysvip=0&scene=1001&lat=${this.lat}&lng=${this.lng}&__lat=${this.lat}&__lng=${this.lng}&option_id=${this.norms[this.normsIndex].id}`
				).then(res => {
					var carts = res.data.message.message.cart.data;
					var arr = [];
					carts.map(v => {
						Object.keys(v).forEach(kk => {
							arr.push(v[kk]);
						})	
					});
					that.carGoodsInfo = arr;
					that.norms[that.normsIndex].num += 1;
					that.sp[that.spIndex].total += 1;
					that.carTotal += 1;
				});
			},
			checkIndex(index) {
				this.navIndex = index;
			},
			listIndex(index) {
				var that = this;
				this.spIndex = index;
				this.$request.post(
					`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=store&op=goods&ta=goods&from=wxapp&state=${this.token}&sid=${this.sp[index].sid}&page=1&psize=30&cid=${this.sp[index].id}&child_id=0&type=&value=&scene=1001&lat=${this.lat}&lng=${this.lng}&__lat=${this.lat}&__lng=${this.lng}`
				).then(res => {
					// console.log(res);
					var info = res.data.message.message;
					//获取规格
					that.dishList = info.goods;
				})

			},
			checkPj(index) {
				this.pjIndex = index;
			},
			open(index) {
				this.popupData = this.dishList[index];
				var norms = JSON.parse(JSON.stringify(this.popupData.options)); //进行数据处理
				norms.map((v, i) => {
					this.carGoodsInfo.map(v2 => {
						if (v2.goods_id == v.goods_id && v.sid == v2.sid && v.name == v2.option_title) {
							v.num == undefined ? v.num = 0 : v.num = v.num;
							console.log(v.num);
							v.num += v2.num * 1;
						}
					})
					if (i == this.normsIndex) {
						v.checked = true
					} else {
						v.checked = false;
					}
					if (v.num == undefined) {
						v.num = 0;
					}
				})
				this.norms = norms;
				console.log(this.$refs)
				this.$refs.popup[0].open();
			},
			// 点击改变规格
			clickBtn(index) {
				if (index != this.normsIndex) {
					this.norms.map((v, index2) => {
						index == index2 ? v.checked = true : v.checked = false
					});
					this.normsIndex = index;
				}
			},
			// 点击关闭规格popup弹窗
			cancel() {
				this.$refs.popup[0].close();
				this.selectNorms = ''; //关闭删除选中信息
			},
			// 点击确认
			determine() {
				uni.navigateTo({
					url: '/pages/orderform/orderform'
				})


			},
			getData() { 
				//获取店铺信息
				var that = this;
				this.$request.get(
					`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=store&op=goods&ta=index&from=wxapp&state=${this.token}&cid=0&sid=${this.sid}&code=undefined&order_id=undefined&__lat=${this.lat}&__lng=${this.lng}&forceLocation=1&configmall=1&scene=1001&lat=${this.lat}&lng=${this.lng}`
				).then(res => {
					console.log(res);
					that.info = res.data.message.message;
					//获取购物车总数量
					that.carTotal = that.info.cart.message.cart.num;
					//对sp进行处理 获取商品数量
					var carts = that.info.cart.message.cart.data; //将carts中的对象全部转成数组
					if (carts != undefined) {
						var sp = JSON.parse(JSON.stringify(that.info.category));
						var arr = [];
						carts.map(v => {
							Object.keys(v).forEach(kk => {
								arr.push(v[kk]);
							})
						})
						arr.map(v => {
							sp.map(v2 => {
								if (v.cid == v2.id && v.sid == v2.sid) {
									v2.total += v.num
								}
							})
						})
						that.carGoodsInfo = arr;
						that.sp = sp;
						that.dishList = that.info.goods;
					} else {
						var sp = JSON.parse(JSON.stringify(that.info.category));
						sp.map(v => {
							v.total = 0;
						})
						that.carGoodsInfo = [];
						that.sp = sp;
						that.dishList = that.info.goods;
					}
				})
			}
		},
		
		computed: {
			price() {
				if (this.carGoodsInfo.length) {
					var price = 0;
					this.carGoodsInfo.map(v => {
						console.log(v.total_price * 1);
						price += v.total_price * 1;
					});
					return price;
				} else {
					return 0;
				}
			}


		}
	};
</script>

<style lang="scss" scoped>
	.full-reduction{
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #FF4A00;
		margin: 34rpx 30rpx;
		display: flex;
		flex-wrap: nowrap;
	}
	
	.full-reduction-tag{
		margin: 0 10rpx;
		font-size: 22rpx;
		text-align: center;
		border: 1rpx solid #FFCDA7;
		padding: 4rpx;
		height: 30rpx;
		border-radius: 8rpx;
		padding: 0 10rpx;
	}
	
	.coupons{
		display: flex;
		font-size: 24rpx;
		box-shadow: 0 0 5rpx 2rpx #f7f7f7;
		width: 690rpx;
		height: 170rpx;
		border-radius: 24rpx;
		margin: 20rpx auto;
		position: relative;
	}
	
	.coupon-value{
		flex: 1;
		color: #FF6F00;
		// padding: 30rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		font-size: 50rpx;
		border-right: 1rpx dashed #DCDFE6;
	}
	
	.coupon-limit{
		flex: 3;
		color: #999;
		display: flex;
		flex-direction: column;
		margin: 30rpx;
		line-height: 40rpx;
	}
	 
	.coupon-btn{
		width: 140rpx;
		height: 60rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #fff;
		background-color: #00C657;
		position: absolute;
		right: 20rpx;
		bottom: 50rpx;
		
	}
	
	.popupBottom{
		display: block;
		text-align: center;
		color: #b5b8bd;
	}
	.btn{
		position: fixed;
		width: 100%;
		bottom: 5rpx;
		text-align: center;
	}
	
	.specifis {
		border: 2rpx solid #688517;
		color: #688517;
	}

	.spec {
		width: 200rpx;
		height: 54rpx;
		font-size: 30rpx;
		color: #666666;
		border: 2rpx solid #E8E8E8;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		margin-top: 30rpx;
	}

	.active {
		border-color: #ff2d4b !important;
		color: #ff2d4b !important;
	}

	.evaluation {
		width: 160rpx;
		height: 50rpx;
		background-color: #fff9e2;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pj {
		display: flex;
		font-size: 24rpx;
		justify-content: space-around;
		color: #999999;
	}

	.selected {
		background-color: #ffd333;
		color: #1b1b1b;
	}

	.list .active {
		background-color: #fff;
		color: #1b1b1b;
	}

	.sp {
		width: 141rpx;
		height: 99rpx;
		background-color: #f7f7f7;
		margin-left: -30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #999999;
		margin-right: 14rpx;
	}

	.select {
		display: none;
		width: 40rpx;
		height: 6rpx;
		background-color: #688517;
		margin-left: 8rpx;
		border-radius: 3rpx;
	}

	.title {
		width: 388rpx;
		font-size: 30rpx;
		margin-top: -8rpx;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.activite {
		.select {
			display: block;
			margin-top: 10rpx;
		}
	}

	.head-nav {
		display: flex;
		flex-wrap: nowrap;
		justify-content: left;
		font-size: 32rpx;
		color: #1b1b1b;
		padding: 57rpx 0rpx 40rpx;
	}
</style>
